<template>
	<view class="feedBack">
		 <view class="part">
			<view class="title">问题和建议</view>
			<view class="content">
				<textarea cols="30" rows="10" placeholder="请输入问题及建议，感谢您的支持。" v-model="content" placeholder-style="font-size:14px;"></textarea>
				<view class="imgs dFlex jStart_aStart">
					<view class="upTool imgPublic" @tap='upImg'>
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix"></image>
					</view>
					<view class="imgFile dFlex jStart_aStart">
						<view class="imgOne imgPublic" v-for="(item,index) in imagesArr" :key='index' @tap.stop='lookBig(item)'>
							<image :src="item" mode="widthFix"></image>
							<view class="del imgPublic" @tap.stop='delImg(index)'>
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/delIcon.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="title">联系方式</view>
			<view class="line">
				<input type="number" placeholder="留下您的联系方式,更可能解决问题" v-model="contact" placeholder-style="color:#999999;font-size:12px;">
			</view>
		 </view>
		 <view class="loginBtn" @tap.stop='saveInfo'>提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagesArr:[],
				content:'',
				contact:'',
			};
		},
		onShareAppMessage() {
			this.tool.monitor();
			return {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			this.tool.monitor();
			let share = {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			// 提交反馈
			saveInfo(){
				if(!this.content){
					uni.showToast({
						title:'简单描述需要反馈的问题',
						icon:"none"
					})
					return;
				}
				if(!this.contact){
					uni.showToast({
						title:'请留下您的联系方式',
						icon:"none"
					})
					return;
				}
				this.tool.getData('/api/shop_admin/doFeedback',{
					content:this.content,
					contact:this.contact,
					shop_id:uni.getStorageSync('storeId')?uni.getStorageSync('storeId'):'',
					images:this.imagesArr.length?this.imagesArr.join(','):'',
				}).then(res=>{
					if(res){
						uni.showToast({
							title:'反馈内容已提交',
							icon:"success"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1650)
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 删除图片
			delImg(idx){
				this.imagesArr.splice(idx,1);
			},
			// 上传图片
			upImg(){
				let len = 9-this.imagesArr.length?9-this.imagesArr.length:0;
				if(len){
					uni.chooseImage({
						count: len, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album','camera'], //从相册选择
						success:(res)=>{
							if(res.tempFilePaths.length){
								res.tempFilePaths.map((item,index)=>{
									this.tool.upImg(item).then(thumb=>{
										console.log(thumb);
										if(thumb){
											this.imagesArr.push(thumb.fullurl);
										}
									}).catch(err=>{
										console.log(err);
									})
								})
							}
						},
						fail:(err)=>{
							uni.showToast({
								title:"图片选择失败",
								icon:"none"
							})
						}
					})
				}else{
					uni.showToast({
						title:'最多上传9张图片',
						icon:"none"
					})
				}
			},
			// 查看大图
			lookBig(url){
				uni.previewImage({
					current:url,
					urls:this.imagesArr,
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f1f1f1;
	}
	.feedBack{
		width: 100%;
		padding: 12px 3.2%;
		box-sizing: border-box;
		.loginBtn{
			position: fixed;
			bottom: 32px;
			text-align: center;
			border-radius: 40px;
			padding: 11px 0;
			color: white;
			width: 74.4%;
			left: 12.8%;
			padding: 22rpx 0;
			background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
		}
		.part{
			width: 100%;
			background: white;
			border-radius: 8px;
			padding: 0 12px 16px;
			box-sizing: border-box;
			.content{
				padding: 12px;
				width: 100%;
				box-sizing: border-box;
				background: #FAFAFA;
				.imgs{
					width: 100%;
					.upTool{
						width: 68px;
						height: 68px;
						margin-right: 8px;
					}
					.imgFile{
						flex: 1;
						.imgOne{
							width: 68px;
							height: 68px;
							border-radius: 4px;
							margin-right: 8px;
							position: relative;
							overflow:hidden;
							image{
								width: 68px;
							}
							.del{
								width: 16px;
								height: 16px;
								position: absolute;
								top: 0;
								right: 0;
								image{
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
			.title{
				padding: 16px 0 12px;
				box-sizing: border-box;
			}
			.line{
				padding: 8px;
				background:#FAFAFA ;
			}
		}
	}
</style>
